var templateParams = {
    tableTheads:["元素名称", "元素类型", "定位类型", "定位值", "frame", "创建时间", "创建人", "修改人", "备注", "操作"],
    columnsQuery: true,
    btnTools:[{
        type:"primary",
        size:"M",
        id:"add-object",
        iconFont:"&#xe600;",
        name:"添加该页面上的元素"
    },{
        type:"danger",
        size:"M",
        id:"batch-op",
        iconFont:"&#xe6bf;",
        name:"批量操作"
    }],
    formControls:[{
        edit:true,
        label:"ID",
        objText:"idText",
        input:[{
            hidden:true,
            name:"id"
        }]
    },
        {
            required:true,
            label:"元素名称",
            input:[{
                name:"element_name"
            }]
        },
        {
            required:true,
            label:"元素类型",
            select:[{
                name:"type",
                option:function(){
                    let options = [];
                    $.each(DICT_CONFIG.element_type, function(k, v){
                        options.push({value: v, text: v});
                    });

                    return options;
                }()
            }]
        },
        {
            required:true,
            label:"定位类型",
            select:[{
                name:"location_by_id",
                option:function(){
                    let options = [];
                    $.each(DICT_CONFIG.location_by, function(i, n){
                        options.push({
                            value: n.id, text:n.cn_name
                        });
                    });
                    return options;
                }()
            }]
        },
        {
            required:true,
            label:"定位值",
            input:[{
                name:"by_value"
            }]
        },
        {
            label:"所属frame/iframe",
            objText:"frame_nameText",
            input:[{
                name:"frame_id",
                hidden:true
            }],
            button:[{
                style:"success",
                value:"选择",
                name:"choose-frame"
            },{
                style:"danger",
                value:"清除",
                name:"clear-frame"
            }]
        },
        // {
        //     label:"取值序号",
        //     input:[{
        //         name:"position_index",
        //         placeholder: "请填入正整数，默认为0"
        //     }]
        // },
        {
            label:"备注",
            textarea:[{
                name:"mark"
            }]
        },
        {
            name: "page_id"
        }

    ]};
var node_type;
var columnsSetting = [
    {
        "data":null,
        "render":function(data, type, full, meta){
            return checkboxHmtl(data.element_name, data.id, "selectElement");
        }},
    {
        "data":"id",
        "width":53,
        "className":"ellipsis"
    },
    {
        "data": "element_name",
        "width": "15%"
    },
    {
        "data": "type",
        "width": 65,
        // "className": "ellipsis"
    },
    {
        "data": "location_by_id",
        // "className": "ellipsis",
        "width": 55,
        "render": function(data){
            return queryObjValueInArray(DICT_CONFIG.location_by, data, 'id', 'cn_name');
        }
    },
    ellipsisData("by_value"),
    ellipsisData("frame_name"),
    // {"data":"position_index", "width":50, "className":"ellipsis"},
    ellipsisData("create_time"),
    ellipsisData("creator_name"),
    ellipsisData("last_mender_name"),
    longTextData("mark", "element_name", "备注信息"),
    {
        "data":null,
        "render":function(data, type, full, meta){
            let context = [];
            if (node_type == 'node_id') {
                context.push({
                    title:"复制",
                    markClass:"object-copy",
                    iconFont:"&#xe6ea;"
                });
            }

            context.push({
                title:"编辑",
                markClass:"object-edit",
                iconFont:"&#xe6df;"
            });
            context.push({
                title:"删除",
                markClass:"object-del",
                iconFont:"&#xe6e2;"
            });

            return btnIconTemplate(context);
        }
    }];

var eventList = {
    ".object-copy":function(){
        let data = $.extend(true, {}, table.row( $(this).parents('tr') ).data());
        data.id = null;
        publish.renderParams.editPage.modeFlag = 0;
        layer_show("新增元素信息", editHtml, editPageWidth, editPageHeight.add, 1, function(layero, index){
            iterObj(data);
        });
        publish.init();
    },
    "#add-object":function(){
        publish.renderParams.editPage.modeFlag = 0;
        layer_show("添加页面元素", editHtml, editPageWidth, editPageHeight.add, 1, function() {
            $("#page_id").val(node_id);
        });
        publish.init();
    },
    "#batch-op":function(){
        let checkList = $(".selectElement:checked");
        if (checkList.length == 0) {
            layer.msg('请至少选择一条记录！', {time: 1500});
            return;
        }
        layer.confirm(
            '请选择你需要进行的批量操作:',
            {
                title:'批量操作',
                btn:['变更页面', '删除', '取消'],
                shadeClose:true,
                btn3: function(index){
                    layer.close(index);
                }
            },function(index){
                layer.close(index);
                chooseElementPage();
            },function(index){
                layer.close(index);
                batchOp($(".selectElement:checked"), REQUEST_URL.WEB_ELEMENT.delElement, "删除", null, "id", {page_id:node_id});
            });
    },
    ".object-edit":function(){
        var data = table.row( $(this).parents('tr') ).data();
        publish.renderParams.editPage.modeFlag = 1;
        publish.renderParams.editPage.objId = data.id;
        publish.renderParams.editPage.currentObj = data;
        layer_show("编辑元素信息", editHtml, editPageWidth, editPageHeight.edit, 1);
        publish.init();
    },
    ".object-del":function(){
        var data = table.row( $(this).parents('tr') ).data();
        opObj("确认要删除此元素吗？", REQUEST_URL.WEB_ELEMENT.delElement, {id:data.id}, this, "删除成功!");
    },
    //选择frame元素
    "#choose-frame": function(){
        layer_show('选择元素所在frame', 'chooseElement.html?callback=chooseFrameCallback&type=web_frame', null, null, 2);
    },
    '#clear-frame':function(){
        $('#frame_id').val('');
        $('#frame_nameText').text('');
        layer.msg('已清除！', {icon: 1, time:1400});
    }
};

var node_id;
var mySetting = {
    eventList:eventList,
    templateCallBack:function(df){
        node_id = GetQueryString("node_id");
        node_type = GetQueryString("node_type");
        if (node_type != 'node_id') {
            $('#add-object').hide();
        }

        if (GLOBAL_UTILS.stringUtils.isNotBlank(node_type)) {
            publish.renderParams.listPage.listUrl = REQUEST_URL.WEB_ELEMENT.listElement + '?' + node_type + '=' + node_id;
        }

        $('.breadcrumb > i:eq(0)').after(" " + GetQueryString("node_name"));
        df.resolve();
    },
    listPage:{
        listUrl:REQUEST_URL.WEB_ELEMENT.listElement,
        tableObj:".table-sort",
        columnsSetting:columnsSetting,
        columnsJson:[0, 11],
        dtOtherSetting:{serverSide:false}
    },
    editPage:{
        editUrl:REQUEST_URL.WEB_ELEMENT.editElement,
        getUrl:REQUEST_URL.WEB_ELEMENT.getElement,
        rules:{
            element_name:{
                required:true,
                minlength:2,
                maxlength:255
            },
            position_index:{
                digits:true
            },
            by_value:{
                required:true,
                minlength:1,
                maxlength:1000
            },
            default_by: {
                required:true,
                minlength:1,
                maxlength:1000
            }
        }
    },
    templateParams:templateParams
};

$(function(){
    publish.renderParams = $.extend(true,publish.renderParams,mySetting);
    publish.init();
});

/**
 * 选择frame完成之后的回调
 * @param obj
 */
function chooseFrameCallback(obj) {
    $('#frame_nameText').text(obj.element_name);
    $('#frame_id').val(obj.id);
    layer.msg('选择成功', {icon: 1, time:1400});
}

var zTreeSetting = {
    view: {showIcon: true, dblClickExpand: false},
    data: {
        simpleData: {
            enable:true,
            idKey: "id",
            pIdKey: "parent_node_id",
            rootPId: 1
        },
        key: {
            name:"node_name"
        }
    },
    callback:{
        beforeDblClick: function(treeId, treeNode){
            if (treeNode.node_level != GLOBAL_PARAM.ELEMENT_NODE_LEVEL.PAGE.value) {
                layer.msg('该节点不是页面,请选择页面节点!', {time: 1400});
                return false;
            }

            return true;
        },
        onDblClick:function (event, treeId, treeNode) {//双击之后关闭窗口
            //选择完成
            layer.close(viewIndex);
            let checkList = $(".selectElement:checked");

            layer.confirm('确定将选中的' + checkList.length + '条记录移动到页面 [ ' + treeNode.node_name + ' ] 中吗？', {title: '提示', icon: 0}, function(index){
                let ids = [];
                $.each(checkList ,function(i, n) {
                    ids.push($(n).val());
                });

                GLOBAL_UTILS.ajaxUtils.ajaxPost(REQUEST_URL.WEB_ELEMENT.moveElement + '&pageId=' + treeNode.id, ids, function(data){
                    refreshTable();
                    layer.msg('移动成功！', {icon: 1, time: 1600});
                }, null, null, '正在处理中...');

                layer.close(index);
            });
        }
    }
};



var viewIndex;
function chooseElementPage () {
    layer_show("请双击选择要转移到的页面", '<div class="page-container"><ul id="node-tree" class="ztree"></ul></div>', 400, null, 1, function (layero, index) {
        layero.spinModal(true);

        viewIndex = index;
        GLOBAL_UTILS.ajaxUtils.ajaxGet(REQUEST_URL.WEB_ELEMENT.listNode, function (data) {
            let zTreeObj = $.fn.zTree.init(layero.find("#node-tree"), zTreeSetting, data.data);
            zTreeObj.expandAll(true);

            layero.spinModal(false);
        });

    }, null, null, {offset: '18px', shadeClose: false});
}